class QueryPayCust extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            customers : [],
            custDetails : []
        };
        this.totalCount = 0;
        this.totalDetailCount = 0;
        this.typeMap = {
            "wx_app":"微信app支付",
            "wx_h5":"微信公众号支付",
            "alipay":"支付宝支付"
        }
    }

    componentDidMount(){
        layui.use(['layer'],()=>{
            this.updateCustomers(1);
        })
    }

    updateCustomers(page,pageSize){
        postJson("/customer/pay/listPage.x",{page:page, pageSize:pageSize},(data)=>{
            this.totalCount = data.data.size;
            this.setState({customers : data.data.list});
        });
    }


    addNewCust(){
        this.refs.addCustModal.show();
    }

    delete(id){
        layui.layer.confirm("确定要删除此客户么(同时会删除所有支付参数)?",()=>{
            postJson("/customer/pay/delete.x",{id:id},()=>{
                layui.layer.msg("删除成功");
                this.refs.table.refresh();
            });
        })

    }

    modify(customer){
        this.refs.customName.value = customer.customName;
        this.refs.customDetail.value = customer.customDetail;
        this.refs.addCustModal.show();
    }

    saveCust(){
        postJson("/customer/pay/save.x",$("#saveCust").serialize(),()=>{
            layui.layer.msg("添加客户成功");
            this.refs.addCustModal.close();
            this.refs.table.refresh();
        })
    }

    detail(id){
        this.customSelectedId = id;
        this.updateCustomerDetails(1);
        this.refs.detail.show();
    }

    /*    支付参数详情页 */
    updateCustomerDetails(page,pageSize){
        postJson("/customer/pay/listCustSecrets.x",{page:page, pageSize:pageSize,id:this.customSelectedId},(data)=>{
            this.totalDetailCount = data.data.size;
            this.setState({custDetails : data.data.list});
        });
    }

    modifyDetail(secret){
        this.refs.id.value = secret.id;
        this.refs.type.value = secret.type;
        this.refs.appId.value = secret.appId;
        this.refs.mchId.value = secret.mchId;
        this.refs.secret.value = secret.secret;
        this.refs.secret2.value = secret.secret2;
        this.refs.addSecret.show();
    }

    deleteDetail(id){
        layui.layer.confirm("确定要删除此条支付参数么?",()=>{
            postJson("/customer/pay/deleteDetail.x",{id:id},()=>{
                layui.layer.msg("删除成功");
                this.refs.tableDetail.refresh();
            });
        })

    }

    saveCustSecret(){
        this.refs.customId.value = this.customSelectedId;
        postJson("/customer/pay/saveSecret.x",$("#saveSecret").serialize(),()=>{
            layui.layer.msg("操作支付参数成功");
            this.refs.addSecret.close();
            this.refs.tableDetail.refresh();
            this.refs.id.value = "";
        })
    }

    getTypeItems(){
        let types = [];
        for(let key in this.typeMap){
            types.push(<option value={key}>{this.typeMap[key]}</option>)
        }
        return types;
    }

    addCustModalPayInfo(){
        this.refs.id.value = '';
        this.refs.type.value = '';
        this.refs.appId.value = '';
        this.refs.mchId.value = '';
        this.refs.secret.value = '';
        this.refs.secret2.value = '';
        this.refs.addSecret.show();
    }

    render(){
        return (
            <Frame header="支付客户列表" headerBtns={[<HeaderBtn onClick={()=>this.addNewCust()}>新增客户</HeaderBtn>]}>
                <Table count={this.totalCount} pageOnClick={(page,pageSize) => this.updateCustomers(page,pageSize)} ref="table">
                    <thead>
                    <tr>
                        <th width={30}>id</th>
                        <th>客户名称</th>
                        <th>客户详情</th>
                        <th>所属用户</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.customers.length > 0? this.state.customers.map((customer)=>{
                            return (
                                <tr>
                                    <td>{customer.id}</td>
                                    <td>{customer.customName}</td>
                                    <td>{customer.customDetail}</td>
                                    <td>{customer.creator}</td>
                                    <td>
                                        <Button className="layui-btn layui-btn-xs layui-btn-normal" onClick={()=>this.modify(customer)}>修改</Button>
                                        <Button className="layui-btn layui-btn-xs" onClick={()=>this.detail(customer.id)}>支付参数</Button>
                                        <Button className="layui-btn layui-btn-xs layui-btn-danger" onClick={()=>this.delete(customer.id)}>删除</Button>
                                    </td>
                                </tr>
                            )
                        }):''
                    }
                    </tbody>
                </Table>
                <Modal title="支付参数" ref="detail" area={['1200px']}>
                    <Table count={this.totalDetailCount} pageOnClick={(page,pageSize) => this.updateCustomerDetails(page,pageSize)}
                           ref="tableDetail" size="sm" frameStyle={{marginLeft:20}} toolbar={[<Button className="layui-btn layui-btn-sm" onClick={()=>this.addCustModalPayInfo()}>添加支付参数</Button>]}
                           style={{tableLayout:"fixed"}}>
                        <thead>
                        <tr>
                            <th>appId</th>
                            <th>商户号</th>
                            <th width={200}>微信API秘钥/支付宝私钥</th>
                            <th width={200}>微信公众号秘钥/支付宝公钥</th>
                            <th>类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.custDetails.length > 0? this.state.custDetails.map((customerDetail)=>{
                                return (
                                    <tr>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{customerDetail.appId}</td>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{customerDetail.mchId}</td>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{customerDetail.secret}</td>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{customerDetail.secret2}</td>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{this.typeMap[customerDetail.type]}</td>
                                        <td style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>
                                            <Button className="layui-btn layui-btn-xs" onClick={()=>this.modifyDetail(customerDetail)}>修改</Button>
                                            <Button className="layui-btn layui-btn-xs layui-btn-danger" onClick={()=>this.deleteDetail(customerDetail.id)}>删除</Button>
                                        </td>
                                    </tr>
                                )
                            }):''
                        }
                        </tbody>
                    </Table>
                </Modal>
                <Modal title="新增客户" ref="addCustModal">
                    <Form size="sm" type="pane" id="saveCust" style={{marginLeft:10}}>
                        <Item>
                            <Label>客户名称</Label>
                            <Input lay-verify="required" name="customName" ref="customName"/>
                        </Item>
                        <Item>
                            <Label>客户详情</Label>
                            <Textarea lay-verify="required" name="customDetail" ref="customDetail"/>
                        </Item>
                        <Item>
                            <Button className="layui-btn layui-btn-normal layui-btn-sm layui-form-btn" onClick={()=>this.saveCust()} lay-submit="true">确定</Button>
                        </Item>
                    </Form>
                </Modal>
                <Modal title="添加客户支付信息" ref="addSecret">
                    <Form size="sm" type="pane" id="saveSecret">
                        <Item>
                            <Label>appId</Label>
                            <Input lay-verify="required" name="appId" ref="appId"/>
                        </Item>
                        <Item>
                            <Label>商户号</Label>
                            <Input lay-verify="required" name="mchId" ref="mchId"/>
                            <Tips>支付宝没有,填none</Tips>
                        </Item>
                        <Item>
                            <Label>秘钥</Label>
                            <Input lay-verify="required" name="secret" ref="secret"/>
                            <Tips>微信API秘钥/支付宝私钥</Tips>
                        </Item>
                        <Item>
                            <Label>秘钥2</Label>
                            <Input lay-verify="required" name="secret2" ref="secret2"/>
                            <Tips> 微信公众号私钥/支付宝公钥</Tips>
                        </Item>
                        <Item>
                            <Label>类型</Label>
                            <Select lay-verify="required" name="type" ref="type">
                                <option value="">请选择客户类型</option>
                                {
                                    this.getTypeItems()
                                }
                            </Select>
                        </Item>
                        <Item>
                            <Button className="layui-btn layui-btn-normal layui-btn-sm layui-form-btn" onClick={()=>this.saveCustSecret()} lay-submit="true">确定</Button>
                        </Item>
                        <input type="hidden" ref="customId" name="customId"/>
                        <input type="hidden" ref="id" name="id"/>
                    </Form>
                </Modal>
            </Frame>
        )
    }
}

ReactDOM.render(<QueryPayCust/>,document.getElementById("queryPayCust"));